<template>
  <div id="otherProfileView">
    <!-- 顶部卡片展示个人信息 -->
    <a-card style="margin-bottom: 20px;" v-if="userInfo.id>0">
      <UserAvatar
          :user-id="userInfo.id"
          :avatar-size="64"
          :font-size="18"
      />
      <p style="margin-top: 16px;">{{userInfo.userProfile}}</p>
    </a-card>

    <!-- 顶部菜单栏 -->
    <a-menu mode="horizontal" :selectedKeys="selectedKeys" @menu-item-click="doMenuClick">
      <a-menu-item key="他的发布">
        他的发布
      </a-menu-item>
      <a-menu-item key="他的收藏">
        他的收藏
      </a-menu-item>
    </a-menu>
    <!-- 底部详细信息 -->
    <div style="padding: 20px;">
      <!-- 动态渲染子路由 -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>
import UserAvatar from "@/components/UserAvatar.vue";
import { onMounted, ref} from 'vue';
import {getUserVOByIdUsingGet} from "@/api/UserRequest";
import {useRoute, useRouter} from "vue-router";

const userInfo = ref({
  id: 0
});
const route = useRoute();
const router = useRouter();

// 当前选中的菜单项
const selectedKeys = ref("");

onMounted(async()=>{
  const result = await getUserVOByIdUsingGet(route.params.userId);
  console.log(route.params.userId);
  userInfo.value = result.data.data;
})

// 点击菜单后更改路由
const doMenuClick = (key) => {
  router.push({
    name: key,
    params:{
      userId: route.params.userId
    }
  });
  selectedKeys.value = key;
};

</script>

<style scoped>
#otherProfileView {
  padding: 20px;
}
</style>